import { defineComponent } from 'vue';
//图文替换
import ImageUploader from 'quill-image-uploader';
import axios from 'axios';
import { addshangbiao, getshangbiaoList, updateGoods, delshangbiao, getchaxun, updatestate } from '@/api/shangpin';
// 时间
import { dayjs, ElMessageBox, ElMessage } from 'element-plus';
import { nanoid, customAlphabet } from 'nanoid';

// 删除
import type { Action } from 'element-plus';

export default defineComponent({
  data() {
    return {
      //启动
      qidong: false,
      // 查询的字段名不可以在对象下 要单独拿出来查询状态
      state: null,
      // 编辑
      showbianji: false,
      // 弹窗
      showAddDialog: false,
      // 图片
      fileList: [],
      // 商品
      shangpgoods: {
        integral: '', // 积分
        vip: '', // 会员折扣
        type: '', // 规格类型
        num: '', // 库存数量
        commodity_prices: '', // 商品价格
        Scribing_price: '', // 划线价格
        Initial_sales: '', // 初始销量
        Commodity_weight: '', // 商品的重量
        Commodity_buying: '', // 商品的买点
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: '', // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        price: 1, // 价格
        creationTime: '', // 创建时间
        turnoverTime: '', // 更新时间
        grounding: '', // 上架
        radio: '', // 单选
        desc: '', //图
      },
      // 编辑
      editGoods: {
        integral: '', // 积分
        vip: '', // 会员折扣
        type: '', // 规格类型
        num: '', // 库存数量
        commodity_prices: '', // 商品价格
        Scribing_price: '', // 划线价格
        Initial_sales: '', // 初始销量
        Commodity_weight: '', // 商品的重量
        Commodity_buying: '', // 商品的买点
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: '', // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        price: '', // 价格
        creationTime: '', // 创建时间
        turnoverTime: '', // 更新时间
        grounding: '', // 上架
        radio: '', // 单选
        desc: '', //图
      },
      //改变状态的按钮
      editstate: {
        integral: '', // 积分
        vip: '', // 会员折扣
        type: '', // 规格类型
        num: '', // 库存数量
        commodity_prices: '', // 商品价格
        Scribing_price: '', // 划线价格
        Initial_sales: '', // 初始销量
        Commodity_weight: '', // 商品的重量
        Commodity_buying: '', // 商品的买点
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: '', // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        price: '', // 价格
        creationTime: '', // 创建时间
        turnoverTime: '', // 更新时间
        grounding: '', // 上架
        radio: '', // 单选
        desc: '', //图
      },
      // 表单
      showform: {
        integral: '', // 积分
        vip: '', // 会员折扣
        type: '', // 规格类型
        num: '', // 库存数量
        commodity_prices: '', // 商品价格
        Scribing_price: '', // 划线价格
        Initial_sales: '', // 初始销量
        Commodity_weight: '', // 商品的重量
        Commodity_buying: '', // 商品的买点
        genre: '', // 商品类型
        name: '', // 商品名称
        barcode: '', // 条码
        classify: '', // 分类
        shop: '', // 店铺
        img: '', // 图片
        sort: '', // 排序
        state: '1', // 状态
        price: '', // 价格
        creationTime: '', // 创建时间
        turnoverTime: '', // 更新时间
        grounding: '', // 上架
        radio: '', // 单选
      },
      // 列表
      cha: [],
      list: [],
      limit: 10, // 一页几个数据
      page: 1, // 页数
      total: 0, // 总数 // 字段的验证
      // 基础验证
      rules: {
        name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
        barcode: [{ required: true, message: '请填写商品条码', trigger: 'blur' }],
        type: [{ required: true, message: '请填写商品类型', trigger: 'blur' }],
        genre: [{ required: true, message: '请填写商品分类', trigger: 'blur' }],
        // img: [{ required: true, message: '请选择图片', trigger: 'blur' }],
      },
      // 扩展验证
      rulesk: {
        integral: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
        vip: [{ required: true, message: '请填写会员折扣', trigger: 'blur' }],
        type: [{ required: true, message: '请填写规格类型', trigger: 'blur' }],
        num: [{ required: true, message: '请填写商品数量', trigger: 'blur' }],
        commodity_prices: [{ required: true, message: '请填写商品价格', trigger: 'blur' }],
      },
      modules: {
        name: 'imageUploader',
        module: ImageUploader,
        options: {
          upload(file: any) {
            console.log('file', file);
            return new Promise((resolve) => {
              const formdata = new FormData();
              formdata.append('file', file);
              formdata.append('type', 'qf2302');
              axios
                .post('http://www.wzsqyg.com/attachment/upload', formdata)
                .then((reulst: any) => {
                  console.log('reulst', reulst);
                  resolve(reulst.data.msg);
                });
            });
          },
        },
      },
    };
  },

  // 显示列表
  mounted() {
    this.getList();
  },
  // 点击事件
  methods: {
    // 修改信息
    openEdit(row: any) {
      console.log('row', row);
      this.editGoods = row;
      // 让弹窗显示
      this.showbianji = true;
      // 修改图片的显示
      this.fileList = [{
        name: row.img.split('.').pop(),
        url: row.img,
      }];
    },
    // 修改确定按钮
    async handleEidt() {
      console.log('bianji', this.editGoods);
      const { id, ...postdata } = this.editGoods;
      const res = await updateGoods(id, postdata);
      console.log('res', res);
      const { status } = res;
      if (status === 200) {
        this.$message.success('修改成功');
        this.showbianji = false;
        this.getList();
      } else {
        this.$message.warning('修改失败');
      }
    },
    // 状态
     // 修改信息
     openw(row: any) {
      console.log('row', row);
      this.editGoods = row;
      // 让弹窗显示
      this.qidong = true;
    },
    // 修改确定按钮
    async Eidt() {
      console.log('bianji', this.editGoods);
      const { id, ...postdata } = this.editGoods;
      const res = await updateGoods(id, postdata);
      console.log('res', res);
      const { status } = res;
      if (status === 200) {
        this.$message.success('修改成功');
        this.showEdit = false;
        this.getList();
      } else {
        this.$message.warning('修改失败');
      }
    },
    // 添加
    async handleAdd() {
      console.log('shangbiao', this.shangpgoods);
      // 获取到的就是form 组件的是方法 在form添加 ref="addfrom" 然后获取this.$refs.addfrom
      console.log('addfrom', this.$refs.addfrom);
      // // 表单的验证 返回是一个异步 await 等到的就是当前内容.方法运行
      try {
        const validateRes = await (this.$refs.addfrom as any).validate();
        const res = await addshangbiao(this.shangpgoods);
        console.log('validateRes', validateRes);
        console.log('res', res);
        const { status } = res;
        if (status === 201) {
          this.$message.success('添加成功');
          this.showAddDialog = false;
          this.getList();
        } else {
          this.$message.warning('添加失败');
        }
      } catch (e) {
        this.$message.warning('请按要求检查表单内容');
      }
    },
    // 获取列表
    async getList() {
      const $skip = (this.page - 1) * this.limit;
      const res = await getshangbiaoList({
        $skip,
        $limit: this.limit,
      });
      console.log('获取列表的结果', res);
      this.list = res.data.data;
      this.total = res.data.total;
    },
    // 商品所属
    showsort(val: number | string) {
      val = Number(val);
      if (val === 0) return '公共商品';
      return '海口解放路店';
    },
    sangpin(val: number | string) {
      if (val === 0) return '生活用品';
      if (val === 1) return '好物推荐';
      if (val === 2) return '办公用品';
      return '打折热销';
    },
    // 时间的设置
    formatTime(time: string) {
      return dayjs(time).add(20, 'hour').format('YYYY-MM-DD HH:mm:ss');
    },
    // 删除
    handleDel(id: number) {
      // 删除的操作一般需要二次确认 避免用户误操作
      ElMessageBox.alert('删除？确定?不后悔？', '想清楚了没', {
        confirmButtonText: 'OK',
        callback: async (action: Action) => {
          if (action === 'cancel') return false;
          const res = await delshangbiao(id);
          console.log('真正的去执行删除', res);
          if (res.status === 200) {
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.warning('删除失败');
          }
          return true;
        },
      });
    },
    // 图片

    handleUpload(options: any) {
      // 实际工作当中我们更多的是自己去执行上传的具体操作 因为上传前我们还有可以需要进行压缩操作等
      console.log('options', options);
      // options.file就是我们要上传的文件对象
      // axios对像上传 需要一个新的FormData方法 在用append方法
      const formdata = new FormData();
      formdata.append('file', options.file); // 实践当中对于这个file对象一般还需要进行压缩处理等
      formdata.append('type', 'qf2302');
      return axios.post('http://www.wzsqyg.com/attachment/upload', formdata);
    },
    // 上传文件前约束图片的大小
    // rawFile  可以获取图片 大小 名称 类型
    handleBeforeUpload(rawFile: any): boolean {
      console.log('rawFile', rawFile);
      // 使用上传之前的钩子我们可以对于上传的文件进行检测或者大小的判断
      if (!rawFile.type.includes('image')) {
        this.$message.warning('只能上传图片文件');
        return false;
      }
      const min = 0.001 * 1024 * 1024;
      if (rawFile.size < min) {
        this.$message.warning('上传的图片不能小于0.2m');
        return false;
      }
      return true;
    },
    // 手动上传
    // response 组将带的可以获取里面的属性 有一个img name属性
    UploadOk(response: any) {
      console.log('response', response);
      // 将获取到的值赋值给 当前属性的图片名称
      this.shangpgoods.img = response.data.msg;
    },
     // respons 回调一个地址 改变编辑图片的地址
     bianUploadOk(response: any) {
      console.log('response', response);
      // 将返回的值 等于商品表里面的封面
      this.editGoods.img = response.data.msg;
    },
    // 分页
    handeSizeChange(val: number) {
      console.log('val', val);
      this.limit = val;
      this.getList();
    },
    handlePageChange(val: number) {
      this.page = val;
      this.getList();
    },
    // 查询
    async chaxun() {
      console.log('231');
      const $skip = (this.page - 1) * this.limit;
      // 根据查询的字段名
      const chastate1 = this.state;
      const res = await getchaxun({
        $limit: this.limit,
        $skip,
        name: null,
        state: chastate1,
      });
      this.list = res.data.data;
      this.total = res.data.total;
    },
    // 随机数
    open() {
      const nanoid = customAlphabet('0123456789', 20);
      const uid = nanoid();
      this.shangpgoods.barcode = `1${uid}`;
    },
     //修改状态
   changestate(row: any, val: number, id: number) {
    // 判断当前的状态
    console.log('state', val);
    if (!val) {
      console.log('启动');
      ElMessageBox.confirm(
        `确定启用"${row.name}"吗？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(async () => {
          console.log('点击了确认');
          this.editstate = row;
          // 表里面的所有的内容
          let { ...postdata } = this.editstate;
          // stare 状态状态等于1的时启动
          postdata.state = 1;
          await updatestate(id, postdata);
          this.getList();
          ElMessage({
            type: 'success',
            message: '启用成功',
          });
        }).catch(async () => {
          this.editstate = row;
          let { ...postdata } = this.editstate;
          postdata.state = 0;
          await updatestate(id, postdata);
          this.getList();
        });
    } else {
      console.log('关闭');
      ElMessageBox.confirm(
        `确定禁用"${row.name}"吗？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(async () => {
          this.editstate = row;
          let { ...postdata } = this.editstate;
          postdata.state = 0;
          await updatestate(id, postdata);
          this.getList();
          ElMessage({
            type: 'success',
            message: '禁用成功',
          });
        }).catch(async () => {
          this.editstate = row;
          let { ...postdata } = this.editstate;
          postdata.state = 1;
          await updatestate(id, postdata);
          this.getList();
        });
    }
  },
  },
});
